<template>
    <view>
        <view class="search" @mousedown="mousedown">
            <view
                class="arrow-search"
                @click="openObjTypeList"
                :style="
                    isOpenList
                        ? 'transform: rotate(180deg); top:14px;'
                        : 'top:16px'
                "
            >
                <text class="icon-font search-icon">&#xe618;</text>
            </view>

            <input
                class="ipt-search"
                type="search"
                @input="searchContent"
                @keydown.enter="doSearch"
                @focus="onFocus"
                :focus="isSearching"
                :value="searchTxt"
                :placeholder="placeholder"
            />

            <!-- 搜索按钮 -->
            <view
                class="i-search"
                @click="searchAction(!isSearching)"
                :style="
                    md == 1 || md == 2 || md == 7 || md == 12 || md == 13
                        ? 'right:55px'
                        : ''
                "
            >
                <text class="icon-font search-icon">{{
                    isSearching ? "\ue64a" : "\ue605"
                }}</text>
            </view>

            <!-- 导出导入 -->
            <!-- <view
                class="u-l-btn"
                @click="onUpDownClick()"
                v-if=" md == 1 ||  md == 2"
            >
                <text class="icon-font u-l-icon-btn">&#xe653;</text>
            </view> -->

            <!-- 新增按钮 -->
            <view
                class="img-jia"
                v-if="
                    showAddGoods &&
                    (md == 1 || md == 2 || md == 7 || md == 12 || md == 13)
                "
                @click="addNew"
            >
                <text class="icon-font search-icon">&#xe606;</text>
            </view>
        </view>
    </view>
</template>

<script>
import cmd from "../../js/Cmd.js";
import staticConst from "../../js/const/StaticConst.js";
import { debounce } from "@/utils/common.js";

export default {
    props: ["placeholder", "showAddGoods", "total", "md"],
    data() {
        return {
            searchTxt: "",
            isSearching: false,
            isOpenList: false,
        };
    },

    mounted() {
        this.debouncedSearch = debounce((value) => {
            this.$emit("inputSearchKw", value);
        }, 500);
    },

    methods: {
        openObjTypeList() {
            if (this.md != 14) {
                this.isSearching = true;
            }
            this.isOpenList = !this.isOpenList;
            this.$emit("openObjTypeList", this.isOpenList);
        },

        setIsOpenList(value) {
            this.isOpenList = value;
        },

        clearSearchTxt() {
            this.searchTxt = "";
        },

        onFocus() {
            this.$emit("inputFocus", this.searchTxt);
            if (this.searchTxt == "") return;
            this.$emit("inputSearchKw", this.searchTxt);
        },

        /****点击上传下载产品*****/
        onUpDownClick() {
            this.$emit("upDownClick");
        },

        /****获取焦点开始搜索*****/
        searchAction(value) {
            if (this.md != 14) {
                this.isSearching = value;
            }
            this.$emit("searchAction", value);
            if (this.isOpenList && !this.isSearching) {
                this.isOpenList = this.isSearching;
            }
        },

        /*** 搜索内容 ***/
        searchContent(e) {
            this.searchTxt = e.detail.value;
            if (this.searchTxt == "") {
                if (
                    this.md == staticConst.MD_GD ||
                    this.md == staticConst.CG_KC
                )
                    this.$emit("inputFocus", this.searchTxt);
                return;
            }
            this.debouncedSearch(this.searchTxt);
        },

        /**添加产品,客户***/
        addNew() {
            if (
                this.md == staticConst.MD_GD ||
                this.md == staticConst.CG_KC ||
                this.md == staticConst.YY_XM
            )
                this.$emit("addNewGoods");
            else if (this.md == staticConst.MD_KH) this.$emit("addCustomer");
            else if (this.md == staticConst.CG_GYS) this.$emit("addSupplier");
        },

        /*** 执行搜索 ***/
        doSearch() {
            if (this.searchTxt == "") {
                this.$msg({ title: "请输入搜索内容" });
                return;
            }
            this.$emit("searchText", this.searchTxt);
        },

        setCatSearchTxt(value) {
            this.searchTxt = value;
        },

        mousedown() {
           // cmd.external(cmd.CMD_MOVE);
        },
		
		setInputSearchTxt(value)
		{
			this.searchTxt = value;
			this.doSearch();
		},
    },
    beforeDestroy() {
        if (this.debouncedSearch) {
            this.debouncedSearch?.cancel();
        }
    },
};
</script>

<style lang="scss">
.search {
    width: 325px;
    padding: 0 10px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .arrow-open {
        transform: rotate(180deg);
        // -webkit-transform:rotate(180deg);
    }
    .ipt-search {
        width: 275px;
        // flex: 1;
        height: 40px;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 13px;
        background-color: #f8f8f8;
        border-radius: 20px;
        font-size: 14px;
        // border: 1px solid #ECECEC;
    }

    .i-search {
        width: 22px;
        height: 22px;
        text-align: center;
        position: absolute;
        right: 20px;
        top: 16px;
        cursor: pointer;
        color: #999;
        text {
            font-size: 22px;
        }
    }

    .i-search:hover {
        color: #3388ff;
    }

    .do-search {
        width: 22px;
        height: 22px;
        text-align: center;
        position: absolute;
        right: 50px;
        top: 18px;
        cursor: pointer;
        color: #999;
        text {
            font-size: 18px;
        }
    }

    .do-search:hover {
        color: #3388ff;
    }

    .arrow-search {
        position: absolute;
        left: 10px;
        top: 16px;
        width: 40px;
        height: 40px;
        text-align: center;
        cursor: pointer;
        color: #999;
        text {
            font-size: 22px;
        }
    }

    .arrow-search:hover {
        color: #3388ff;
    }

    .u-l-btn {
        width: 42px;
        overflow: hidden;
        padding-left: 10px;
        .u-l-icon-btn {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
        }
        .u-l-icon-btn:hover {
            color: #3388ff;
        }
    }

    .img-jia {
        padding-left: 10px;
        cursor: pointer;
        text {
            font-size: 20px;
            color: #333;
        }
        text:hover {
            color: #3388ff;
        }
    }
}
</style>
